// 动效演示页面
Page({
  data: {
    // 页面状态
    currentTab: 0,
    showTransition: true,
    
    // 微交互演示
    microInteractions: [
      { type: 'button', feedback: 'ripple', theme: 'default', text: '默认按钮' },
      { type: 'button', feedback: 'glow', theme: 'his', text: '他的按钮' },
      { type: 'button', feedback: 'scale', theme: 'hers', text: '她的按钮' },
      { type: 'card', feedback: 'lift', theme: 'default', text: '卡片交互' },
      { type: 'icon', feedback: 'bounce', theme: 'his', text: '图标交互' },
      { type: 'tag', feedback: 'pulse', theme: 'hers', text: '标签交互' },
    ],
    
    // 情感动效演示
    emotions: [
      { emotion: 'happy', intensity: 'medium', text: '开心', color: '#ffd93d' },
      { emotion: 'sad', intensity: 'medium', text: '悲伤', color: '#87ceeb' },
      { emotion: 'excited', intensity: 'high', text: '兴奋', color: '#ff6b9d' },
      { emotion: 'calm', intensity: 'low', text: '平静', color: '#a8e6cf' },
      { emotion: 'love', intensity: 'high', text: '爱心', color: '#ff8a80' },
      { emotion: 'angry', intensity: 'medium', text: '愤怒', color: '#ff5722' },
      { emotion: 'surprised', intensity: 'high', text: '惊讶', color: '#ffeb3b' },
      { emotion: 'neutral', intensity: 'medium', text: '中性', color: '#9e9e9e' },
    ],
    
    // 页面过渡演示
    transitions: [
      { type: 'slide', direction: 'right', text: '右滑' },
      { type: 'slide', direction: 'left', text: '左滑' },
      { type: 'slide', direction: 'up', text: '上滑' },
      { type: 'slide', direction: 'down', text: '下滑' },
      { type: 'fade', direction: '', text: '淡入淡出' },
      { type: 'scale', direction: '', text: '缩放' },
      { type: 'flip', direction: 'right', text: '翻转' },
      { type: 'cube', direction: 'right', text: '立方体' },
      { type: 'stack', direction: '', text: '堆叠' },
    ],
    
    // 当前选中的动效
    selectedEmotion: 'happy',
    selectedTransition: 'slide',
    selectedDirection: 'right',
    
    // 动效配置
    animationConfig: {
      duration: 1000,
      intensity: 'medium',
      autoPlay: false,
      loop: false,
      particles: false,
    },
  },

  onLoad() {
    this.initAnimations();
  },

  onShow() {
    // 页面显示时播放进入动画
    this.playPageEnterAnimation();
  },

  // 初始化动画
  initAnimations() {
    // 初始化动画工具
    this.animationUtils = require('../../utils/animations.js');
    
    // 设置页面主题
    const theme = wx.getStorageSync('currentTheme') || 'default';
    this.setData({ theme });
  },

  // 播放页面进入动画
  playPageEnterAnimation() {
    const animation = this.animationUtils.createPageEnterAnimation();
    this.setData({
      pageAnimation: animation.export(),
    });
  },

  // 切换标签页
  onTabChange(e) {
    const { index } = e.detail;
    this.setData({ currentTab: index });
    
    // 播放标签切换动画
    this.playTabSwitchAnimation(index);
  },

  // 播放标签切换动画
  playTabSwitchAnimation(index) {
    const animation = this.animationUtils.createTabSwitchAnimation(index);
    this.setData({
      tabAnimation: animation.export(),
    });
  },

  // 微交互事件
  onMicroInteraction(e) {
    const { type, feedback, theme } = e.currentTarget.dataset;
    
    // 触发触觉反馈
    if (feedback === 'haptic') {
      wx.vibrateShort({ type: 'light' });
    }
    
    // 显示反馈信息
    wx.showToast({
      title: `${type} - ${feedback}`,
      icon: 'none',
      duration: 1000,
    });
    
    console.log('微交互触发:', { type, feedback, theme });
  },

  // 情感动效事件
  onEmotionAnimation(e) {
    const { emotion, intensity } = e.currentTarget.dataset;
    
    this.setData({ 
      selectedEmotion: emotion,
      'animationConfig.intensity': intensity,
    });
    
    // 播放情感动效
    this.playEmotionAnimation(emotion, intensity);
  },

  // 播放情感动效
  playEmotionAnimation(emotion, intensity) {
    // 通过组件引用播放动画
    const emotionComponent = this.selectComponent('#emotion-demo');
    if (emotionComponent) {
      emotionComponent.play();
    }
    
    console.log('情感动效播放:', { emotion, intensity });
  },

  // 页面过渡事件
  onPageTransition(e) {
    const { type, direction } = e.currentTarget.dataset;
    
    this.setData({
      selectedTransition: type,
      selectedDirection: direction,
      showTransition: false,
    });
    
    // 延迟显示过渡效果
    setTimeout(() => {
      this.setData({ showTransition: true });
    }, 100);
    
    console.log('页面过渡触发:', { type, direction });
  },

  // 动画配置变更
  onConfigChange(e) {
    const { field } = e.currentTarget.dataset;
    const { value } = e.detail;
    
    this.setData({
      [`animationConfig.${field}`]: value,
    });
  },

  // 播放自定义动画
  onPlayCustomAnimation() {
    const { selectedEmotion, animationConfig } = this.data;
    
    // 创建自定义动画
    const customAnimation = this.animationUtils.createCustomAnimation({
      emotion: selectedEmotion,
      duration: animationConfig.duration,
      intensity: animationConfig.intensity,
    });
    
    this.setData({
      customAnimation: customAnimation.export(),
    });
    
    wx.showToast({
      title: '自定义动画播放',
      icon: 'success',
    });
  },

  // 重置所有动画
  onResetAnimations() {
    this.setData({
      selectedEmotion: 'happy',
      selectedTransition: 'slide',
      selectedDirection: 'right',
      showTransition: true,
      'animationConfig.duration': 1000,
      'animationConfig.intensity': 'medium',
      'animationConfig.autoPlay': false,
      'animationConfig.loop': false,
      'animationConfig.particles': false,
    });
    
    wx.showToast({
      title: '动画已重置',
      icon: 'success',
    });
  },

  // 动画事件监听
  onAnimationStart(e) {
    console.log('动画开始:', e.detail);
  },

  onAnimationEnd(e) {
    console.log('动画结束:', e.detail);
  },

  onTransitionStart(e) {
    console.log('过渡开始:', e.detail);
  },

  onTransitionEnd(e) {
    console.log('过渡结束:', e.detail);
  },

  // 分享功能
  onShareAppMessage() {
    return {
      title: '动效演示 - 情感化交互体验',
      path: '/pages/animation-demo/index',
      imageUrl: '/images/share_animation_demo.png',
    };
  },
});